<template>
  <div v-show="visible" :class="{fade}" class="xtx-dialog">
    <div :class="{fade}" class="wrapper">
      <div class="header">
        <h3>{{ title }}</h3>
        <a class="iconfont icon-close-new" href="javascript:;" @click="close"></a>
      </div>
      <div class="body">
        <slot name="body"></slot>
      </div>
      <div class="footer">
        <slot name="footer"></slot>
      </div>
    </div>
  </div>
</template>

<script>

// vue3.0 v-model:visible 语法糖 拆解 :visible="data" @update:visible="data = $event"
// vue2.0 visible.sync 语法糖跟 vue3.0 v-model:visible 一样
import { onMounted, ref, watch } from 'vue'

export default {
  name: 'XtxDialog',
  props: {
    title: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  setup(props, { emit }) {
    const fade = ref(false)

    // visible的值为打开对话框, 否则就是关闭对话框, 其实控制fade的值即可

    // 监听visible值变化, 去给响应式fade数据赋值 | 这个逻辑是否有问题, 需要探讨一下
    // fade更改动画效果的值, 会比props属性的visible晚一些, 这样做能友好的触发动画效果
    watch(() => props.visible, (nowVal) => {
      // 结构和样式同时加上过渡效果, 需要些延时
      setTimeout(() => {
        fade.value = nowVal
      }, 0)
    }, { immediate: true })

    // 自己关闭对话框, 修改父组件数据状态
    const close = () => {
      emit('update:visible', false)
    }

    return {
      fade,
      close
    }
  }
}
</script>

<style lang="less" scoped>
.xtx-dialog {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 8887;
  // 占满浏览器窗口 宽高
  width: 100%;
  height: 100%;

  transition: all 0.4s;
  background: rgba(0, 0, 0, 0);

  &.fade {
    background: rgba(0, 0, 0, 0.5);
  }

  .wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    // 高宽怎么定 ?, 只加一个宽度, 高度由内容决定
    width: 600px;
    // 这个不用加 z-index, 绝对定位的特性, 形成了子绝互相
    //z-index: 888;
    border-radius: 4px;
    background: #fff;

    // 过渡效果
    transition: all 0.4s;
    transform: translate(-50%, -60%);
    opacity: 0;

    &.fade {
      transform: translate(-50%, -50%);
      opacity: 1;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 70px;
      padding: 0 20px;
      border-bottom: 1px solid #f5f5f5;

      h3 {
        font-weight: 400;
        font-size: 18px;
      }

      a {
        font-size: 24px;
        color: #999;

        &:hover {
          color: #666;
        }
      }
    }


    .body {
      padding: 20px 40px;
      font-size: 16px;
      max-height: 550px;
      overflow: auto;

      .icon-warning {
        color: @priceColor;
        margin-right: 3px;
        font-size: 16px;
      }
    }

    .footer {
      padding: 10px 0 30px;
      text-align: center;
    }

  }
}

</style>
